<template>
    <div id="content">
        <!-- 内容 -->
        <el-row :gutter="10" class="chart_top">
            <el-col :span="24">
                <el-card shadow="always" :style="{width:'100%',height:autoHeight+'px'}">
                    <div style="position: relative;">
                        <div id="line">123123123</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="always" :style="{width:'100%',height:autoHeight+'px'}">
                    <div style="position: relative;">
                        <div id="pie">1231231</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="always" :style="{width:'100%',height:autoHeight+'px'}">
                    <div style="position: relative;">
                        <div id="bar">123131</div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <div id="popover">
            <el-popover
                ref="search"
                width="200"
                trigger="click"
            >
                <h1 style="color: #FFFFFF;background-color: #3ac1c4;margin-bottom:15px;padding:5px 0px 5px 15px; border-radius:3px;">操作人</h1>
                <div style="width:90%;height:40%;border:1px solid gray; margin:0 auto; padding:5px 5px 5px 5px;">
                    <h1>测试内容</h1>
                </div>
            </el-popover>
        </div>
    </div>
</template>
<script>
import echarts from 'echarts';
import planApi from 'plugins/axios/planApi.js';
export default {
    data(){
        return{
            statistics:{
                grid:null,
            }
        }
    },
    mounted(){

    },
    created(){
        let self = this;
        self.init();
    },
    watch:{
        $route(){
        }
    },
    computed:{
        autoHeight(){
            return this.$store.state.clientHeight/2-55;
        }
    },
    methods:{
        //初始化
        init(){
            let self = this;
            self.initStatistics();
        },
        //初始化统计图
        initStatistics(){
            let self = this;
            self.queryStatisticsData();
        },
        //查询统计图数据
        queryStatisticsData(){
            let self = this;
            self.createStatistics();
        },
        //创建柱状统计图
        createStatistics(){
            let self = this;

    
        },
        //设置统计图option
        setStatisticsOption(){
            let self = this;
            let  option = {
                        tooltip : {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow',
                                label: {
                                    show: true
                                }
                            }
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        legend: {
                            data:['Growth', 'Budget 2011', 'Budget 2012'],
                            itemGap: 5
                        },
                        grid: {
                            top: '12%',
                            left: '1%',
                            right: '10%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type : 'category',
                                data :  ["Securities and Exchange Commission", "Other Commissions and Boards(discretion)"]
                            }
                        ],
                        yAxis: [
                            {
                                type : 'value',
                                name : 'Budget (million USD)',
                                axisLabel: {
                                    formatter: function (a) {
                                        a = +a;
                                        return isFinite(a)
                                            ? echarts.format.addCommas(+a / 1000)
                                            : '';
                                    }
                                }
                            }
                        ],
                        dataZoom: [
                            {
                                show: true,
                                start: 94,
                                end: 100
                            },
                            {
                                type: 'inside',
                                start: 94,
                                end: 100
                            },
                            {
                                show: true,
                                yAxisIndex: 0,
                                filterMode: 'empty',
                                width: 30,
                                height: '80%',
                                showDataShadow: false,
                                left: '93%'
                            }
                        ],
                        series : [
                            {
                                name: 'Budget 2011',
                                type: 'bar',
                                data: [0, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 1000, 2000, 2000, 2000, 2000, 2000, 2000]
                            },
                            {
                                name: 'Budget 2012',
                                type: 'bar',
                                data: [1000, 1000, 1000, 2000, 2000, 1000, 1000, 4000, 1000, 1000, 1000, 12000, 12000, 1000, 2000]
                            }
                        ]
                };
            return option;
        },
    },
}
</script>
<style scoped>

</style>